<!--网格长查看 网格员事件统计 -->
<template>
	<view class="viewBg">
		<!-- 列表 -->
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in input_list" :key="index">
				<view class="uni-list-cell-navigate uni-navigate-right" @click="showPicker(index)">
					<text class="cell-text">{{item.title}}</text>
					<text class="cell-detail">{{item.selectedLabel}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right" @click="showPicker">
					<text class="cell-text">选择网格员</text>
					<text class="cell-detail">{{selectedLabel}}</text>
				</view>
			</view>
		</view> -->
		<!-- 选择开始日期 -->
		<view class="selectDate">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateStart" :start="startDate" :end="endDate" @change="bindStartDateChange">
					<view class="uni-input">{{dateStart}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<!-- 选择结束日期 -->
		<view class="selectDate" @click="onShowDatePicker2">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
					<view class="uni-input">{{dateEnd}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<view class="checkBox">
			<axb-check-box ref="radio3" :list="sartTime" @change="radioChangeType"></axb-check-box>
		</view>

		<button type="primary" @click="getList">搜索</button>

		<view class="lineH20"></view>
		<!-- 列表 -->
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
				<view class="uni-list-cell-navigate uni-navigate-right"  @click="showUserDetail(item)">
					<view class="">{{item.name}}</view>
					<view class="cell-detail">提报{{item.tb}}件 | 办结{{item.bj}}件</view>
				</view>
			</view>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from "@/components/mpvue-picker/mpvuePicker.vue"
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import axbCheckBox from "@/components/axb-checkbox/axb-checkbox.vue"
	import {today,yesterday,week,month} from '../../../common/date-utils.js'
	export default {
		components: {
			mpvuePicker,
			axbCheckBox,
			uniTag,
			today,
			yesterday,
			week,
			month,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				input_list:[{title:"选择网格员",value:null,selectedLabel:"请选择",selectedValue:"0"},
				{title:"选择区域",value:null,selectedLabel:"请选择",selectedValue:"0"}
				
				],
				themeColor: '#007AFF',
				pickerValueDefault: [0],
				mode: '',
				pickerValueArray: [],
				pickerValueArray_region: [],
				selectedLabel: "请选择",
				selectedValue: '',
				deepLength:1,
				dateStart: currentDate,
				dateEnd: currentDate,

				sartTime:[{
					name:'本月',
					value:'month',
					checked:0
				},{
					name:'本周',
					value:'week',
					checked:0
				},{
					name:'今天',
					value:'today',
					checked:0
				},{
					name:'昨天',
					value:'yesterday',
					checked:0
				},{
					name:'全部',
					value:'total',
					checked:0
				}],

				list: [],

			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			let self = this;
			this.$http.get('ac/xagrid/appGridUserService/getMyGridUsers', {
				// scpid: 'bearer.' + _token
			}).then((res) => {
				if (res.errcode === '0' && res.data.length > 0) {
					// 					const _selectList = res.data;
					// 					for (var i = 0; i < _selectList.length; i++) {
					// 						var oItem = new Object; //定义一个对象做字段的转换
					// 						oItem.label = _selectList[i].name;
					// 						oItem.value = _selectList[i].id;
					// 						self.pickerValueArray.push(oItem);
					// 					}
					// res.data.unshift({
					// 	label: '全部',
					// 	value: '123'
					// });
					self.pickerValueArray = res.data;
					console.log('选择数据'+JSON.stringify(self.pickerValueArray));
				} else {
					uni.showToast({
						title: res.errmsg,
						mask: false,
						duration: 1500
					});
				}
			});
		},
		methods: {
			showPicker(index){
				let self = this;
				if(this.input_list[index].title == '选择区域' && !this.input_list[index].value){
					this.$http.get("as/xagrid/appgrid/getchildenlist",{}).then((res)=>{
						const _selectList = res.data;
						for (var i = 0; i < _selectList.length; i++) {
							var oItem = new Object; //定义一个对象做字段的转换
							oItem.label = _selectList[i].name;
							oItem.value = _selectList[i].id;
							self.pickerValueArray_region.push(oItem);
						}
						self.pickerValueArray_region.unshift({
							label: '全部',
							value: '456'
						});
						this.input_list[index].value = self.pickerValueArray_region;
						this.pickerValueArray = this.input_list[index].value;
						this.$refs.mpvuePicker.show();
					})
				}
				if(this.input_list[index].title == '选择网格员' && !this.input_list[index].value){
					this.$http.get('ac/xagrid/appCompanyService/getCompanyItems',{}).then((res)=>{
						this.$http.get("ac/xagrid/appGridUserService/getMyGridUsers",{}).then((res)=>{
							res.data.unshift({
								label: '全部',
								value: '123'
							});
							this.input_list[index].value = res.data;
							this.pickerValueArray = this.input_list[index].value;
							this.$refs.mpvuePicker.show();
						})
					});
				}
				this.selectIndex = index;
				this.mode = 'selector';
				this.pickerValueDefault = [0];
				
				
			},
			onConfirm(e){
				this.input_list[this.selectIndex].selectedLabel = e.label;
				this.input_list[this.selectIndex].selectedValue = e.value;
				
			},
			// showPicker() {
			// 	this.mode = 'selector';
			// 	this.deepLength = 1;
			// 	this.pickerValueDefault = [0];
			// 	this.$refs.mpvuePicker.show();
			// },
			// onConfirm(e) {
			// 	this.selectedLabel = e.label;
			// 	this.selectedValue = e.value;
			// },
			bindStartDateChange: function(e) {
				this.dateStart = e.target.value

			},
			bindEndDateChange: function(e) {
				this.dateEnd = e.target.value;
			},

			radioChangeType: function(val) {
				console.log(val) // 单选时 返回选中项的value, 反选返回null
			},

			getList() {
				var params = new Object;
				params.startDate = this.dateStart;
				params.endDate = this.dateEnd;
				if (this.input_list[0].selectedValue == '123' || this.input_list[0].selectedValue === '' || this.input_list[0].selectedValue === '0') {
					console.log('锄禾日当午');
				}else{
					params.userId = String(this.input_list[0].selectedValue);
				}
				if (this.input_list[1].selectedValue == '456' || this.input_list[1].selectedValue === '' || this.input_list[1].selectedValue === '0') {
					console.log('锄禾日当午');
				}else{
					params.grid_id = String(this.input_list[1].selectedValue);
				}
				this.$http.post('ac/xagrid/appEventStatisticsService/getWgyEventStatistics', params).then((res) => {
					this.list = res.data;
				})


			},
			showUserDetail(item){
				console.log(JSON.stringify(item));
				uni.navigateTo({
					url:'../userEventStatistical/userEventStatistical?userId='+item.createBy,
				})
			},
			
			radioChangeType(value){
				console.log("选择的日期: " + JSON.stringify(value));
				if(value === 'month'){
					var m = month();
					console.log('月'+ m);
					this.dateStart = m[0];
					this.dateEnd = m[1];
				}else if(value === 'week'){
					var w = week();
					this.dateStart = w[0];
					this.dateEnd = w[1];
				}else if(value === 'today'){
					var t = today();
					this.dateStart = t;
					this.dateEnd = t;
				}else if(value === 'yesterday'){
					var y = yesterday();
					this.dateStart = y;
					this.dateEnd = y;
				}else if(value === 'total'){
					const currentDate = this.getDate({
						format: true
					});
					this.dateStart = '2019-01-01';
					this.dateEnd = currentDate;
				}
			},
			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;
		/* background-color: #0FAEFF; */
	}

	.cell-detail {
		margin-right: 20upx;
	}

	.uni-list-cell-navigate {
		justify-content: space-between;
	}

	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.lineH1 {

		height: 2upx;
		width: 100%;
		/* margin-left: 10upx; */
		background-color: #F7F7F7;
	}

	.selectDate {
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.checkBox{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		flex-flow: wrap;
		margin: 20upx;
	}

	button {
		margin: 30upx;
	}
</style>
